<template>
    <div>
        <pagetitle></pagetitle>
        <el-card>
            <el-form :model="pageData" class="formbox" label-width="140px" :disabled="formDisabled" label-position="right">
                <div class="formboxitem">
                    <div class="title">客户信息</div>
                    <!-- <el-form-item label="客户名称：">
                        <el-input v-model="pageData.customerName" class="inputs" placeholder="请输入客户名称"></el-input>
                        <span class="formTip">*客户名称</span>
                    </el-form-item>
                     -->
                    <el-form-item label="客户名称：">
                        <el-select v-model="pageData.teamId" filterable remote reserve-keyword placeholder="请输入客户名称搜索" remote-show-suffix :remote-method="remoteMethod" :loading="loading" class="inputs" @change="selectChange">
                            <el-option v-for="(item, index) in teamList" :key="index" :label="item.teamName" :value="item.teamId" />
                        </el-select>
                        <span class="formTip">*客户名称</span>
                    </el-form-item>
                    <el-form-item label="客户电话：">
                        <el-input v-model="pageData.customerPhone" disabled class="inputs" placeholder="请输入客户电话"></el-input>
                        <span class="formTip">*客户电话</span>
                    </el-form-item>
                    <el-form-item label="产业分类：">
                        <div class="inputs">
                            <div v-for="(tag, index) in pageData.industrialClassificationList" :key="index">
                                <el-tag>
                                    {{ tag.industrialName }}
                                </el-tag>
                            </div>
                        </div>

                        <span class="formTip">*参考标准： GB/T 4754-2017 国民经济行业分类</span>
                    </el-form-item>
                    <!-- <el-form-item label="产业分类：">
                        <div class="selectorbtn" style="margin-right: 0">
                            <el-cascader v-model="industrialClassificationIdsValues" disabled placeholder="请选择产业分类" ref="industrialClassificationcascader" class="inputs" :props="props1" @change="handleChange"></el-cascader>
                        </div>
                        <span class="formTip">*参考标准： GB/T 4754-2017 国民经济行业分类</span>
                    </el-form-item>
                    <el-form-item label="" v-if="industrialClassificationIdsTexts.length > 0">
                        <div>
                            <div v-for="(tag, index) in industrialClassificationIdsTexts" :key="index">
                                <el-tag closable @close="handleClose(index)">
                                    {{ tag }}
                                </el-tag>
                            </div>
                        </div>
                    </el-form-item> -->
                    <!-- <el-form-item label="产业分类说明：">
                        <el-input v-model="pageData.illustrate" :rows="6" resize="none" disabled type="textarea" placeholder=""></el-input>
                    </el-form-item> -->
                </div>
                <div class="formboxitem">
                    <div class="title">GIS信息</div>
                    <el-form-item label="客户地址：">
                        <addRess class="inputs" :value="pageData.customerAddressArea.keyText" disabled :key="pageData.customerAddressArea" placeholder="请选择客户地址"></addRess>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="pageData.customerAddress" disabled class="inputs" placeholder="客户详细地址"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="客户地址：">
                        <addRess class="inputs" :value="pageData.addressVal" disabled :key="pageData.addressVal" placeholder="请选择客户地址" :getAreaData="getAreaData"></addRess>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="pageData.customerAddress" disabled class="inputs" placeholder="请输入详细地址"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label=""> -->
                    <mars3d
                        ref="mars3ds"
                        class="mars3ds"
                        :teamName="pageData.customerName"
                        v-if="pageData.mapKey"
                        :addr="`${pageData.customerAddressArea.valueText}/${pageData.detailedAddress ? pageData.detailedAddress : ''}`"
                        :lng="pageData.longitude"
                        :lat="pageData.latitude"
                    ></mars3d>
                    <!-- </el-form-item> -->
                    <!-- <mars3d class="mars3ds"></mars3d> -->
                </div>
                <div class="formboxitem" v-if="!pageType.type">
                    <!-- <el-button class="submitbtn" text bg @click="onSubmit">添加客户</el-button> -->
                    <sxnfbtn @click="onSubmit">添加客户</sxnfbtn>
                </div>
            </el-form>
            <div class="formboxitem" v-if="pageType.type">
                <sxnfbtn class="submitbtn" v-if="pageType.type == '1'" @click="router.back()">返回</sxnfbtn>
                <sxnfbtn class="submitbtn" v-if="pageType.type == '2'" @click="onSubmitPut">修改客户</sxnfbtn>
                <!-- <el-button class="submitbtn" v-if="pageType.type == '1'" text bg @click="router.back()">返回</el-button> -->
                <!-- <el-button class="submitbtn" v-if="pageType.type == '2'" text bg @click="onSubmitPut">修改客户</el-button> -->
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
// import mars3d from "@/components/mars3d.vue";
import { ref, reactive, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import mars3d from "@/components/mars3d.vue";
import type { CascaderProps } from "element-plus";
import { industrialClassifications, setClient, getClientMsg, industrialClassificationsOne, putClient, getElseTeam } from "@/api/team";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { Value } from "sass";
const store = useStore();
const router = useRouter();
const route = useRoute();
const pageData: any = reactive({
    customerName: "",
    customerPhone: "",
    customerAddressArea: {},
    customerAddress: "",
    ownerTeamId: "",
    teamId: "",
    industrialClassificationIds: [],
    industrialClassificationList: [],
    currentTeamId: store.getters.mainTeamId,
    customerId: "",
    mapKey: "",
    latitude: "",
    longitude: "",
});
// const queryTeamId = ref("");
const teamList: any = ref([]);
const loading = ref(false);
const remoteMethod = (query: string) => {
    if (query) {
        loading.value = true;
        getElseTeam({
            teamName: query,
        }).then((res) => {
            teamList.value = res.data;
            // console.log(teamList.value, pageData);
            setTimeout(() => {
                loading.value = false;
            }, 200);
        });
    }
};
const selectChange = () => {
    teamList.value.forEach((v: any) => {
        if (v.teamId == pageData.teamId) {
            // console.log(v, "321");
            pageData.customerName = v.teamName;
            pageData.customerPhone = v.legalPersonPhone;
            if (v.address && typeof v.address == "string") {
                pageData.customerAddressArea = JSON.parse(v.address);
            }
            if (!v.address) {
                pageData.customerAddressArea = {
                    keyText: "",
                };
            }

            pageData.latitude = v.applicantLat;
            pageData.longitude = v.applicantLon;
            pageData.mapKey = new Date().getTime();
            console.log(pageData, "321");

            pageData.customerAddress = v.detailedAddress ? v.detailedAddress : "";
            pageData.industrialClassificationList = v.industrialClassificationList;
            pageData.industrialClassificationIds = [];
            if (v.industrialClassificationList && v.industrialClassificationList.length > 0) {
                v.industrialClassificationList.forEach((c: any) => {
                    pageData.industrialClassificationIds.push(c.industrialId);
                });
            }
        }
    });
};
// const cardType = ref(["法人", "授权管理员"]);
// const pageData: any = reactive({
//     customerName: "",
//     customerPhone: "",
//     customerAddressArea: "",
//     customerAddress: "",
//     teamId: "",
//     industrialClassificationIds: [],
//     illustrate: "",
//     addressVal: "",
//     customerId: "",
// });
// 产业分类数据懒加载
// const industrialClassificationIdsValues: any = ref([]);
// const industrialClassificationIdsTexts: any = ref([]);
// const props1: CascaderProps = {
//     label: "industrialName",
//     value: "industrialId",
//     lazy: true,
//     lazyLoad(node: any, resolve) {
//         const { data, level } = node;
//         industrialClassifications(data.industrialId ? data.industrialId : 0).then((res) => {
//             res.data.forEach((v: any) => {
//                 industrialClassifications(v.industrialId).then((res1) => {
//                     if (res1.data.length == 0) {
//                         v.leaf = true;
//                     } else {
//                         v.leaf = false;
//                     }
//                 });
//             });
//             setTimeout(() => {
//                 resolve(res.data);
//             }, 500);
//         });
//     },
// };
// const industrialClassificationcascader: any = ref(null);
// const handleChange = (value: any) => {
//     let node = industrialClassificationcascader?.value.getCheckedNodes()[0];
//     // console.log(value[value.length - 1]);
//     pageData.industrialClassificationIds.push(value[value.length - 1]);
//     pageData.illustrate = node.data.illustrate;
//     setTimeout(() => {
//         addindustrialClassificationIds();
//     }, 300);
// };
// 添加行业分类
// const addindustrialClassificationIds = () => {
//     // if (formDisabled.value) {
//     //     return;
//     // }
//     let node = industrialClassificationcascader.value.getCheckedNodes()[0];
//     if (node) {
//         // console.log(node);
//         industrialClassificationIdsTexts.value.push(node.text);
//     }
// };
// 移除产业分类
// const handleClose = (i: number) => {
//     pageData.industrialClassificationIds.splice(i, 1);
//     industrialClassificationIdsTexts.value.splice(i, 1);
// };
// 地址
// const getAreaData = (val: any) => {
//     pageData.customerAddressArea = JSON.stringify(val);
// };
const onSubmit = () => {
    pageData.customerAddressArea = JSON.stringify(pageData.customerAddressArea);
    // console.log(pageData.customerAddressArea);
    // return;
    setClient(pageData).then((res: any) => {
        ElMessage.success("添加成功");
        router.back();
    });
};
const onSubmitPut = () => {
    pageData.customerAddressArea = JSON.stringify(pageData.customerAddressArea);
    // console.log(pageData.customerAddressArea);
    // return;
    putClient(pageData).then((res: any) => {
        ElMessage.success("修改成功");
        router.back();
    });
};

const getClientMsgs = () => {
    getClientMsg(pageType.id).then((res: any) => {
        let data = res.data;
        console.log(data, "231321");
        nextTick(() => {
            pageData.customerName = data.customerName;
            remoteMethod(data.customerName);
            pageData.customerPhone = data.customerPhone;
            pageData.teamId = data.teamId;
            pageData.customerId = data.customerId;
            if (data.customerAddressArea && typeof data.customerAddressArea == "string") {
                pageData.customerAddressArea = JSON.parse(data.customerAddressArea);
            }
            if (!data.customerAddressArea) {
                pageData.customerAddressArea = {
                    keyText: "",
                };
            }
            pageData.latitude = data.latitude;
            pageData.longitude = data.longitude;
            pageData.mapKey = new Date().getTime();
            console.log(pageData, "321");
            pageData.customerAddress = data.detailedAddress ? data.detailedAddress : "";
            pageData.industrialClassificationList = data.industrialClassificationList;
            pageData.industrialClassificationIds = [];
            if (data.industrialClassificationList && data.industrialClassificationList.length > 0) {
                data.industrialClassificationList.forEach((c: any) => {
                    pageData.industrialClassificationIds.push(c.industrialId);
                });
            }
        });
        // console.log(pageData.customerAddressArea, "231321");
    });
};
// console.log(route);
// 页面类型
const formDisabled = ref(false);
const pageType: any = route.query;
if (pageType.type == "1") {
    // 从我的团队页面进入
    formDisabled.value = true;
    route.meta.title = "查看客户";
    getClientMsgs();
} else if (pageType.type == "2") {
    // 从加入团队页面搜索进入
    formDisabled.value = false;
    route.meta.title = "修改客户";
    getClientMsgs();
}
// 递归查询产业分类 industrialClassificationIdsTexts
// const industrialclassification = (id: number | string, idList: any | [], array: any | []) => {
//     industrialClassificationsOne(id).then((res) => {
//         const data: any = res.data;
//         array.unshift(data.industrialName);
//         idList.unshift(data.industrialId);
//         if (data.parentId != 0) {
//             industrialclassification(data.parentId, idList, array);
//         } else {
//             // pageData.value.industrialClassificationIds.push(idList[idList.length - 1]);
//             industrialClassificationIdsTexts.value.push(array.join("/"));
//         }
//         // console.log(array);
//     });
// };
</script>
<style scoped>
.mars3ds {
    height: 600px !important;
}
</style>
